<template>
	<div id="mapPage" style="height: 100%;">
		<mapLeftMenu v-if="newBM&&newMap&&config.isOpenEditor" :BM="newBM" :map="newMap" ref="mapLeftMenu"></mapLeftMenu>
		<mapBottomBar v-if="newBM&&newMap&&config.isOpenEditor" :BM="newBM" :map="newMap" ref="mapBottomBar"></mapBottomBar>
		<!-- <div id="mapPage" style="height: 45rem;"> -->
		<div :id="id" style="width: 100%;height: 100%;"></div>
		<mapRightEditor ref="mapRightEditor" v-if="config.isOpenEditor"></mapRightEditor>
		<div v-else>
			<span class="handleBtns" v-if="config.isShowEditorBtn">
				<el-button type="primary" size="mini" @click="toEditorPages">编辑地图</el-button>
			</span>
		</div>
		<contextMenu></contextMenu>
	</div>
</template>

<script>
	import {newBigeMap, loadingFunc} from './mapComponents/utils/map.js'
	import mapLeftMenu from './mapComponents/mapLeftMenu.vue'
	import mapBottomBar from './mapComponents/mapBottomBar.vue'
	import mapRightEditor from './mapComponents/mapRightEditor.vue'
	import getMapInitData from './mapComponents/utils/mapData.js'
	import contextMenu from './mapComponents/contextMenu.vue'
	// import bigeMap from '../../../../utils/bigeMap.js'
	// const mapConfig = {
	// 	isOpenEditor: true, // 是否打开编辑
	// 	mapUrl: 'http://localhost:9000', // 地图服务器地址
	// 	mapSource: 'bigemap.arcgis-satellite', // 地图来源
	// 	maxZoom: 18, // 最大缩放级别
	// 	zoom: 4 ,// 地图初始化缩放级别
	// 	initialCoordinates: [29.382175, 104.897461], // 初始坐标
	// 	isOpenFlyToBounds: false // 开启飞图特效
	// }
	// var map = ''
	export default {
		// ['id', 'mapHeight', 'configs', 'baseId']
		props: {
			id: {
				type: String,
				default: ''
			},
			mapHeight: {
				type: String,
				default: '100%'
			},
			configs: {
				type: Object,
				default: {}
			},
			baseId: {
				type: String,
				default: ''
			},
			baseName: {
				type: String,
				default: ''
			},
			baseType: {
				type: String,
				default: ''
			},
			variety:{
				type: Object,
				default: () => {}
			}
		},
		components:{
			mapLeftMenu,
			mapBottomBar,
			mapRightEditor,
			contextMenu
		},
		data() {
			return {
				// mapConfig: mapConfig,
				config: {
					isOpenEditor: this.configs.isOpenEditor ? this.configs.isOpenEditor : false, // 是否打开编辑
					mapUrl: this.configs.mapUrl ? this.configs.mapUrl : 'http://59.110.54.18:3000', // 地图服务器地址
					mapSource: this.configs.mapSource ? this.configs.mapSource : 'bigemap.arcgis-satellite', // 地图来源
					maxZoom: this.configs.maxZoom ? this.configs.maxZoom : 18, // 最大缩放级别
					zoom: this.configs.zoom ? this.configs.zoom : 4, // 地图初始化缩放级别
					initialCoordinates: this.configs.initialCoordinates ? this.configs.initialCoordinates : [29.562557733678805,
						106.57725334167482
					], // 初始坐标
					isOpenFlyToBounds: this.configs.isOpenFlyToBounds ? this.configs.isOpenFlyToBounds : false, // 开启飞图特效
					isShowEditorBtn: this.configs.isShowEditorBtn ? this.configs.isShowEditorBtn :
					false, // 是否显示编辑按钮，显示的时候，isOpenEditor必须为true
					coverage: this.configs.coverage ? this.configs.coverage : [],
				},
				editorBox: false,
				testData: [],
				mapDataId: '', // 获取到的地图数据id
				postUrls: '', //修改或新增地图
				// 地图是否初始化完成
				mapIsInit: false,
				// 传递到left组件的值
				newBM: '',
				newMap: '',
				leftMenuTime: new Date().getTime()
			}
		},
		mounted() {
			/**
			 * loadingFunc：加载地图必要js和css
			 * 传入地图url
			 */
			loadingFunc(this.config.mapUrl).then(res=>{
				// 加载成功后初始化地图
				// 传入当前对象，地图挂载id，地图配置
				newBigeMap.init(this, this.id, this.config).then(res=>{
					// 初始化成功
					this.newBM = res.BM
					this.newMap = res.map
					this.mapIsInit = true
					setTimeout(()=>{
						this.getDatas()
					},300)
					// console.log(this.$route.query.varietyId)
					// if(this.$route.query.varietyId!='' && this.$route.query.varietyIndex!=''){
					// 	this.variety.varietyId = this.$route.query.varietyId
					// 	this.variety.varietyIndex = this.$route.query.varietyIndex
					// }
				})
			})
			
		},
		watch: {
			baseId() {
				if(this.mapIsInit){
					this.getDatas()
				}
			}
		},
		methods: {
			getDatas() {
				if(this.baseId){
					getMapInitData(this.baseId).then(res=>{
						newBigeMap.receiveMapInitData(res.mapData)
						this.mapDataId = res.mapDataId
						this.postUrls = res.postUrl
						// console.log(res)
					})
				} else if(this.$route.query.baseType == 'noBaseId' || this.baseType == 'noBaseId'){
					let mapData = JSON.parse(sessionStorage.getItem('mapEphemeralData'))
					if(mapData){
						newBigeMap.receiveMapInitData(mapData)
						this.mapIsInit = true
					} else {
						this.mapIsInit = false
					}
				}
			},
			getAreas(callback){
				newBigeMap.getAreas((res)=>{
					if(this.mapIsInit){
						callback(res)
					}
				})
			},
			getMapCoverageData(callback){
				let data = newBigeMap.customData
				if(data.size > 0){
					callback([...data.values()])
				} else {
					callback([])
				}
			},
			toEditorPages() {
				// 打开新页面进行编辑
				// window.open('/editorMap')
				this.$emit('cacheData')
				if (this.baseId) {
					// 缓存数据
					// console.log(this.$parent.cacheData())
					// this.$emit('cacheData')
					// return
					// 跳转页面
					this.$router.push(`/editormap?baseId=${this.baseId}&name=${this.baseName}`)
				} else if(this.baseType == 'noBaseId'){
					// 在没有选择基地的情况下跳转页面
					this.$router.push(`/editormap?varietyId=${this.variety.varietyId}&varietyIndex=${this.variety.varietyIndex}&baseType=noBaseId`)
				} else {
					this.$message.error('请先选择基地')
				}
				// console.log(this.baseId)
				// return
			},
			/**
			 * @param {latLng}  坐标 object {lat: 28.92163128242129, lng: 111.70898437500001} or Arry[28.92163128242129,111.70898437500001].
			 * @param {zoom}  显示级别 number
			 */
			flyingFigure(latLng, zoom) {
				// 飞图---------到指定位置
				this.newBigeMap.flyTo(latLng, zoom)
			},
		},
	}
</script>
<style scoped="scoped">
	#mapPage {
		position: relative;
	}

	#map {
		width: 100%;
		height: 100%;
	}
	
	.cardEditor {
		position: absolute;
		top: 165px;
		right: 11px;
	}

	.handleBtns {
		position: absolute;
		top: 12px;
		right: 10px;
	}

	.editorBox {
		right: -300px;
	}
	
</style>
<style>
	.bigemap-bottom{
		display: none !important;
	}
	img.bigemap-marker-icon{
		margin-top: -32px !important;
	}
	div.bigemap-interactive{
		cursor: move !important;
	}
	div.bigemap-editing-icon{
		/* display: none; */
		margin-left: -4px !important;
		margin-top: -4px !important;
		width: 8px !important;
		height: 8px !important;
		border-radius: 100%;
		border: 2px solid #111;
	}
	.bigemap-control{
		opacity: 0;
	}
	
	/* .rightClickBox .menuItem::before{
		background: red;
	} */
</style>